<template>
    <div class="indexcontainer">
        <v-layout column justify-center align-center>
            <v-flex xs12 sm8 md6>
                <v-carousel cycle height="650">
                    <v-carousel-item
                        v-for="(item,i) in items"
                        :key="i"
                        :src="item.src"
                        reverse-transition="scroll-x-transition"
                        transition="scroll-x-transition"
                    ></v-carousel-item>
                </v-carousel>
                <!-- {{ip}} -->
            </v-flex>
        </v-layout>
        <v-footer dark app padless>
            <v-card class="flex" flat tile>
                <v-card-title class="teal">
                    <strong class="subheading">Get connected with us on social networks!</strong>
                    <v-spacer></v-spacer>
                    <v-btn
                        @click.stop="showmsg"
                        v-for="icon in icons"
                        :key="icon"
                        class="mx-4"
                        dark
                        icon
                    >
                        <v-icon size="24px">{{ icon }}</v-icon>
                    </v-btn>
                </v-card-title>

                <v-card-text class="py-2 white--text text-center">
                    {{ new Date().getFullYear() }} —
                    <strong>1152283574@qq.com</strong>
                </v-card-text>
            </v-card>
        </v-footer>
        <v-snackbar v-model="snackbar" left>
            {{ text }}
            <template v-slot:action="{ attrs }">
                <v-btn color="pink" text v-bind="attrs" @click="snackbar = false">Close</v-btn>
            </template>
        </v-snackbar>
    </div>
</template>

<script>
export default {
    async asyncData({ $axios }) {
        const ip = await $axios.$get("/logos");
        return { ip };
    },
    components: {},
    data() {
        return {
            items: [
                {
                    src: "images/banner/banner5.jpg",
                },
                {
                    src: "images/banner/banner4.jpg",
                },
                {
                    src: "images/banner/banner3.jpg",
                },
                {
                    src: "images/banner/banner2.jpg",
                },
                {
                    src: "images/banner/banner1.jpg",
                },
            ],
            snackbar: false,
            text: "敬请期待!",
            icons: ["mdi-facebook", "mdi-twitter", "mdi-linkedin", "mdi-instagram"],
        };
    },
    methods: {
        showmsg(){
            this.snackbar = true
        }
    },
};
</script>

<style lang="scss">
.indexcontainer {
    padding-top: 2px;
}
</style>
